/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable react/jsx-no-bind */
import { h, Component } from 'preact';
import { Link } from 'preact-router/match';
import classNames from 'classnames';
// import style from './style.css';
import './index.scss';

export default class Menu extends Component {

	state = {
		menus: [
			{ id: 'selected', name: '首页', href: '/' },
			// { id: '3',name: '图片集锦',href: '/pics' },
			{ id: '5', name: '学无止境', href: '/study' },
			{ id: '6', name: '时间轴', href: '/timeline' },
			{ id: '2', name: '关于', href: '/about' },
			// { id: '7',name: '留言',href: '/msg' },
			{ id: '4', name: '组件库', href: '/plugins' }
		],
		active: false,
		isShow: false
	}
 

	componentDidMount() {
		const { pathname } = window.location;

		this.setState((state) => {
			const arr = state.menus.filter(i => i.href == pathname);
			return { ...state, active: arr.length > 0 ? arr[0].id : false };
		});
	}

	render(props, state) {
		return (
			<ul style={{...props.style}} className={classNames('navbar-nav bd-navbar-nav flex-row',{ 'nav-menu-mobile-panel': props.isMobile })} >
				{state.menus.map(({ id, name, ...other }) => (
					<li key={id} className="nav-item">
						<Link className={classNames('nav-link', { active: state.active === id })} onClick={_ => this.setState({ active: id }, () => {
							props.onMenuClick();
						})} {...other}
						>{name}</Link>
					</li>
				))}
			</ul>
		);
	}
}